<template>
  <div class="app-container">

    <div class="app-container__section">
      <PlusSearch
        v-bind="getSearchBinds()"
        :columns="columns"
        v-model="searchForm"
      />
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="getBinds()"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="gSelection.length === 0"
                @click="handleDelete"
                v-hasPermi="['monitor:operlog:remove']"
              >删除</el-button
              >
              <el-button
                type="danger"
                plain
                icon="Delete"
                @click="handleClean"
                v-hasPermi="['monitor:operlog:remove']"
              >清空</el-button
              >
              <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['monitor:operlog:export']"
              >导出</el-button
              >
          <ClockTimer :task="gGetList"/>
          <SearchAreaControl v-model="showSearchForm"/>
        </template>
        <template #plus-cell-businessType="scope">
          <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
        </template>
        <template #plus-cell-action="scope">
          <el-tooltip effect="dark" content="详情" placement="top">
            <el-button
              link
              type="primary"
              icon="View"
              @click="handleView(scope.row, scope.index)"
              v-hasPermi="['monitor:operlog:query']"
            >详细</el-button >
          </el-tooltip>
        </template>
      </PlusTable>
    </div>

    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块："
              >{{ form.title }} / {{ typeFormat(form) }}</el-form-item
            >
            <el-form-item label="登录信息："
              >{{ form.operName }} / {{ form.operIp }} /
              {{ form.operLocation }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{
              form.requestMethod
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{
              form.jsonResult
            }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间："
              >{{ form.costTime }}毫秒</el-form-item
            >
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作时间：">{{
              parseTime(form.operTime)
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{
              form.errorMsg
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Operlog">
import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { PlusSearch, PlusTable } from 'plus-pro-components'

const { proxy } = getCurrentInstance();
const { sys_oper_type, sys_common_status } = proxy.useDict(
  'sys_oper_type',
  'sys_common_status'
);


const columns = computed(() => [
  {
    label: "系统模块",
    prop: "title",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "操作类型",
    prop: "businessType",
    valueType: "select",
    tableColumnProps: {
      align: "center"
    },
    options: sys_oper_type.value
  },
  {
    label: "请求方式",
    prop: "requestMethod",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "操作人员",
    prop: "operName",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "操作地址",
    prop: "operIp",
    tableColumnProps: {
      align: "center"
    }

  },
  {
    label: "操作状态",
    prop: "status",
    valueType: "select",
    tableColumnProps: {
      align: "center"
    },
    options: sys_common_status.value
  },
  {
    label: "操作日期",
    prop: "operTime",
    tableColumnProps: {
      align: "center"
    },
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      format: "YYYY-MM-DD"
    },
    render: val=> proxy.parseTime(val)
  },
  {
    label: "消耗时间",
    prop: "costTime",
    tableColumnProps: {
      align: "center"
    },
    hideInSearch: true,
    render: (value) => {
      return value + "ms";
    }
  },
  {
    label: "操作",
    prop: "action",
    width: 100,
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  }
]);

// 搜索条件
const searchForm = ref({})

const {
  gRouteMeta,
  gTableData,
  gTotal,
  gLoadingStatus,
  gPageInfo,
  gReset,
  gGetList,
  gOnPageChange,
  gSelection,
  gOnSelectionChange,
  gShowSearchForm,
  gResetForm,
  gResetPage,
  getBinds,
  getSearchBinds
} = useTablePage(list, {
  searchForm,
})

const { deleteAction } = useActions();
function handleDelete(row) {
  deleteAction({
    api: delOperlog,
    uniqueKey:'operId',
    selection: row.operId || gSelection.value
  }).then(() => {
    setTimeout(async ()=>{
      await gGetList();
    },500)
  });
}

const open = ref(false);


const defaultSort = ref({ prop: 'operTime', order: 'descending' });

const data = reactive({
  form: {},
});

const {  form } = toRefs(data);


/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
}


/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  searchForm.value.orderByColumn = column.prop;
  searchForm.value.isAsc = column.order;
  gGetList();
}
/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
}

/** 清空按钮操作 */
async function handleClean() {
  await  proxy.$modal.confirm('是否确认清空所有操作日志数据项?')
  await cleanOperlog();
  setTimeout(async ()=>{
    await gGetList();
  },500)
  proxy.$modal.msgSuccess('清空成功');
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'monitor/operlog/export',
    {
      ...searchForm.value,
    },
    `operlog_${new Date().getTime()}.xlsx`
  );
}
</script>
